<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title=""
    :footer="null"
    :width="1000"
    :height="680"
    :destroyOnClose="true"
    wrapClassName="stationPopup"
    @height-change="handleHeightChange"
  >
    <div class="content">
      <GlobalOlMap />
      <a-button type="primary" size="large" danger class="closeBtn" @click="state.closeModal()">关闭</a-button>
      <a-button type="primary" size="large" class="saveBtn" @click="savePointData">保存位置信息</a-button>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, reactive, provide } from 'vue';
  import { BasicModal, useModalInner } from '@gui-pkg/antdcomponents';
  import { GlobalOlMap, getGlobalOlMap } from "@/components/GlobalOlMap";
  import { addPointDataLayer, removeLayer, drawFeatures, removeDraw } from 'gmap-ol';
  import markIcon from '@/assets/icon/mark_bs.png';

  const modalHeightValue = ref(680);
  const state = reactive({
    formActionType: null,
    closeModal: null,
    coordinates: [],
    lgtd: null,
    lttd: null,
  });

  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false });
    const formActionType = data.formActionType;
    const { getFieldsValue } = formActionType;
    state.formActionType = formActionType;
    state.closeModal = closeModal;
    const { lgtd, lttd } = await getFieldsValue();
    state.lgtd = lgtd;
    state.lttd = lttd;

    await removeDraw();
    handleDrawFeatures();
    if (lgtd) {
      addMapPointLayer();
    }
  });

  // 经纬度坐标回显，在地图展示位置图标
  const addMapPointLayer = () => {
    const olMap = getGlobalOlMap();
    const view = olMap.getView();
    view.animate({ zoom: 13, center: [Number(state.lgtd), Number(state.lttd)] });
    const pointData = [{
      lgtd: state.lgtd,
      lttd: state.lttd,
    }]
    const pointOptions = {
      layerName: 'mark-PointLayer',
      icon: markIcon,
      styles: {
        image: {
          scale: 0.6,
          anchor: [0.5, 0.95], // 锚点设置为图标底部中心
        },
      },
    };
    addPointDataLayer(olMap, pointData, pointOptions)
  }

  // 绘制坐标，显示图标
  const handleDrawFeatures = () => {
    const olMap = getGlobalMap();
    const drawOptions = {
      type: 'Point',
      clearPrevious: true,
      styles: {
        image: {
          src: markIcon,
          scale: 0.6,
          anchor: [0.5, 0.95], // 锚点设置为图标底部中心
        },
      },
    };

    // 获取绘制图形要素数据的回调函数，可选
    function drawCallbackFn(layer) {
      removeLayer(olMap, 'mark-PointLayer');
      // 获取图层中的所有要素
      const features = layer.getFeatures();
      features.forEach((feature)=> {
        const geometry = feature.getGeometry(); // 获取Feature的几何体
        state.coordinates = geometry.getCoordinates(); // 获取点的坐标
      });
    }
    // 绘制图形
    drawFeatures(olMap, drawOptions, drawCallbackFn);
  }

  // 保存数据
  const savePointData = () => {
    const coordinates = state.coordinates;
    const { setFieldsValue } = state.formActionType;
    setFieldsValue({
      lgtd: coordinates[0],
      lttd: coordinates[1]
    });
    state.closeModal();
  }

  // 弹窗高度变化，主要是监听是否点击了全屏
  const handleHeightChange = (height: string) => {
    modalHeightValue.value = height;
  };
  provide('ModalHeightChange', modalHeightValue);
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .content {
    width: 100%;
    height: 100%;
    position: relative;
    .closeBtn {
      position: absolute;
      top: 6px;
      right: 146px;
      z-index: 1000;
    }
    .saveBtn {
      position: absolute;
      top: 6px;
      right: 6px;
      z-index: 1000;
    }
  }
</style>
